<template>
	<view class="container">
		<view class="login__head">
			<text class="login__head--title">登录/注册</text>
		</view>
		<view class="login__body">
			<text class="login__body--title">手机号</text>
			<view class="login__input--box">
				<image src="/static/image/login/phone.png" class="login__input--image"></image>
				<input
					placeholder="请输入您在社区里填写的手机号"
					v-model="phoneValue"
					@input="changeUser"
					@blur="()=>{if(!phoneValue) showClearIcon = false }"
					@focus="changeUser"
					:focus="true"
					class="login__input"
					placeholder-style="color: #CCCCCC;"
					name="phoneValue"
					type="number"
				/>
				<image src="/static/image/login/cancel.png" class="login__input--del" v-show="showClearIcon" @tap="clearIcon"></image>
				<text class="msg__tip" v-if="tip">{{tip}}</text>
			</view>
			<text class="login__body--title">验证码</text>
			<view class="login__input--box">
				<image src="/static/image/login/code.png" class="login__code--image"></image>
				<input
					placeholder="请输入验证码"
					v-model="codeValue"
					@input="changeCode"
					@blur="()=>{if(!codeValue) showClearCode = false }"
					@focus="changeCode"
					class="login__input"
					placeholder-style="color: #CCCCCC;"
					name="phoneValue"
					maxlength="6"
					type="number"
				/>
				<image src="/static/image/login/cancel.png" class="login__input--del" v-show="showClearCode" @tap="clearCode"></image>
				<button @tap="getVerificationCode" class="code__btn" type="default" :disabled="phoneState"  plain="true">{{smsText}}</button>
			</view>
			<view class="login__bottom">
				<button class="login__bottom--btn" type="primary" :disabled="disabled" :loading="loading" @tap="formSubmit">登录/注册</button>
			</view>
		</view>
	</view>
</template>

<script>
	//来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
	var graceChecker = require('../../../common/graceChecker/graceChecker.js');
	import * as api from "@/http/api";
	import { mapState, mapActions } from 'vuex';
	export default {
		data() {
			return {
				loading: false,
				phoneValue: '', //账号
				codeValue: '', //验证码
				showClearIcon: false,
				showClearCode: false,
				smsText: '获取验证码',
				timer_num: 60,
				reg: /^1[3|4|5|7|8][0-9]{9}$/,
				tip: '',
				encryptedData: '',
				iv: '',
				rawData: '',
				signature: ''
			}
		},
		computed: {
			...mapState(['openId','token']),
			disabled(){
				return !(this.phoneValue && this.codeValue);
			},
			//手机是否输入完全
			phoneState() {
				return this.phoneValue.length == 11 && this.timer_num === 60 && this.reg.test(this.phoneValue) ? false : true;
			},
		},
		watch: {
			phoneValue: {
				handler(newVal,oldVal){
					const reg = /^1[3|4|5|7|8][0-9]{9}$/;
					if(newVal.length === 11 && !this.reg.test(newVal)){
						this.tip = '请输入正确的手机号';
					}else if(newVal.length === 11 && this.reg.test(newVal)){
						this.tip = ''
					}
				}
			}
		},
		methods: {
			...mapActions(['getUserOpenId','platformAuth','getUserStatus']),
			//修改手机号
			changeUser: function(event) {
				this.phoneValue = event.target.value;
				if (event.target.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			changeCode: function(event) {
				this.codeValue = event.target.value;
				if (event.target.value.length > 0) {
					this.showClearCode = true;
				} else {
					this.showClearCode = false;
				}
			},
			//清除用户名输入框
			clearIcon() {
				this.phoneValue = '';
				this.showClearIcon = false;
			},
			clearCode() {
				this.codeValue = '';
				this.showClearCode = false;
			},
			// 获取验证码
			getVerificationCode(){
				// 60秒倒计时
				let timeClock;
				timeClock = setInterval(()=>{
					this.timer_num--;
					this.smsText = `${this.timer_num}s`;
					if(this.timer_num) return;
					clearInterval(timeClock);
					this.smsText = '重新发送';
					this.timer_num = 60;
				},1000)
				
				this.$request({
					url: api.getCode,
					data: {
						mobile: this.phoneValue
					}
				}).then(res=>{
					console.log(res)
				})
			},
			// 获取微信用户信息
			async getUserAuthInfo(){
				return await new Promise((resolve, reject) => {
					uni.getUserProfile({
						desc: '获取个人信息',
						success: (res) => {
							console.log('res',res)
							this.encryptedData = res.encryptedData
							this.iv = res.iv
							this.rawData = res.rawData
							this.signature = res.signature
							resolve()
						},
						fail: res => {
							console.log('fail',res)
							// 获取失败的去引导用户授权
							uni.showToast({
								title: '请先授权~',
								icon: 'none'
							});
						}
					})
				})
			},
			
			// 保存微信用户信息
			saveEncryptedUserInfo(){
				this.$request({
					url: api.saveEncryptedUserInfo,
					data: {
						encryptedData: this.encryptedData,
						ivStr: this.iv,
						rawData: this.rawData,
						signature: this.signature,
					},
					method: 'POST'
				}).then(res => {
					this.$store.commit('setUserInfo',{
						avatarUrl: res.avatarUrl,
						city: res.city,
						country: res.country,
						language: res.language,
						gender: res.gender,// 性别 0：未知、1：男、2：女
						nickName: res.nickName,
						province: res.province,
					})
				}).catch( err => {
					console.log('保存信息',err)
				})
			},
			// 登录/注册
			formSubmit(e) {
				this.getUserAuthInfo().then(()=>{
					this.$request({
						url: api.smsCheck,
						data: {
							mobile: this.phoneValue,
							code: this.codeValue,
							openId: this.openId
						},
						method: 'POST'
					}).then( res => {
						this.$cache.set('isLogin',true)
						// uni.redirectTo({
						// 	url: '/pages/community/index/index'
						// })
						this.getUserOpenId().then(this.platformAuth).then(this.getUserStatus).then(this.saveEncryptedUserInfo)
						console.log('登录/注册后去认证页面的判断---');
						const authStatus = this.$store.state.authStatus
						// console.log('authStatus',authStatus);
						if(authStatus === 'UNAUTHORIZED'){
							//未注册自己跳转
							console.log('登录/注册页面到认证页面跳转---');
							uni.redirectTo({
								url: '/pages/community/index/index'
							})
						} else {
							console.log('不是未注册')
						}
					}).catch(err =>{
						console.log('err',err)
					})
				})
			}
		},
		onLoad(){
			
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
	.container {
		padding: 0 32rpx;
		background-color: $uni-bg-color;
		height: 100vh;
		box-sizing: border-box;
	}
	.login__head {
		
		&--title {
			padding: 80rpx 0;
			display: flex;
			font-size: 48rpx;
			font-weight: 600;
		}
	}
	
	.login__body--title {
		font-size: $uni-font-size-lg;
	}
	
	.login__input {
		display: flex;
		flex: 1;
	}
	
	.login__input--box {
		position: relative;
		margin-bottom: 66rpx;
		padding: 22rpx 0 30rpx 0;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid $uni-border-color;
		
		.login__input--image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 22rpx;
		}
	}
	
	.login__input--del {
		width: 30rpx;
		height: 30rpx;
	}
	
	.login__code--image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 22rpx;
	}
	
	.code__btn {
		width: 212rpx;
		height: 56rpx;
		margin-left: 20rpx;
		line-height: 56rpx;
		border-radius: 28rpx;
		font-size: $uni-font-size-base;
	}
	
	.msg__tip {
		position: absolute;
		bottom: -50rpx;
		font-size: $uni-font-size-sm;
		color: red;
	}
	
	.login__bottom {
		margin-top: 34rpx;
		
		&--btn {
			width: 480rpx;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 44rpx;
		}
	}
	uni-button[type=default][plain][disabled] {
	    color: #353535;
	    border: 1px solid #353535;
	    background-color: rgba(0,0,0,0);
	}
	
	uni-button[type=default][plain] {
	    color: #FF6C25;
	    border: 1px solid #FF6C25;
	    background-color: rgba(0,0,0,0);
	}
	
	uni-button[disabled][type=primary] {
		background-color: #f7a47d;
	}
	
	uni-button[disabled][type=primary] {
		background-color: #f99464;
	}
	
	uni-button {
		background-color: #FF6C25;
	}
	
	.button-hover[type=primary]{
		background-color: #f78d5a;
	}
	
	button[type=primary] {
		background-color: #FF6C25;
	}
	
	button[disabled][type=primary] {
		background-color: #f99464;
	}
</style>
